<template>
    <div class="editProfileDetail">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span> {{language.unify_detail}} </span>
            </span>
            <span class="right rightActive" @click="submit">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <dl class="editBox">
                <dt>
                    <!-- Worth -->
                </dt>
                <dd>
                    <label>{{language.unify_income}}</label>
                    <select @change="checkIsGuest" class="selectA" v-model="type">
                        <option v-for="item in incomeList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_netWorth}}</label>
                    <select class="selectA" v-model="net_worth">
                        <option v-for="item in netWorthList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Appearance -->
                </dt>
                <dd>
                    <label>{{language.unify_height}}</label>
                    <select class="selectA" v-model="height_all">
                        <option v-for="item in heightList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_eyes}}</label>
                    <select class="selectA" v-model="eyes">
                        <option v-for="item in eyesColorList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_hair}}</label>
                    <select id="eyes" class="selectA" v-model="hair">
                        <option v-for="item in hairColorList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_bodyType}}</label>
                    <select id="eyes" class="selectA" v-model="body">
                        <option v-for="item in bodyTypeList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Lifestyle -->
                </dt>
                <dd>
                    <label>{{language.unify_occupation}}</label>
                    <select class="selectA" v-model="occupation">
                        <option v-for="item in occupationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_smoking}}</label>
                    <select class="selectA" v-model="smoker">
                        <option v-for="item in smokingList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_drinking}}</label>
                    <select class="selectA" v-model="drinker">
                        <option v-for="item in drinkingList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_haveChildren}}</label>
                    <select class="selectA" v-model="have_children">
                        <option v-for="item in haveChildrenList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_wantChildren}}</label>
                    <select class="selectA" v-model="want_children">
                        <option v-for="item in wantChildrenList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_havePets}}</label>
                    <select class="selectA" v-model="pets">
                        <option v-for="item in havepetsList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Background -->
                </dt>
                <dd>
                    <label>{{language.unify_education}}</label>
                    <select class="selectA" v-model="education">
                        <option v-for="item in educationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_ethnicity}}</label>
                    <select class="selectA" v-model="ethnicity">
                        <option v-for="item in ethnicityList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_language}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{languagesStr}}</div>
                        <select multiple class="selectA" v-model="languageData">
                            <option v-for="item in languageList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_politicalBeliefs}}</label>
                    <select class="selectA" v-model="political_beliefs">
                        <option v-for="item in politicalBeliefsList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
                <dd>
                    <label>{{language.unify_religion}}</label>
                    <select class="selectA" v-model="religion">
                        <option v-for="item in relationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow profileEdit"></div>
                </dd>
            </dl>
        </div>
        <loading :props="{type:'page' ,show:loadingAjax}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import storeDataPartMixin from '../common/storeDataPartMixin';
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'editProfileDetail',

    mixins: [storeDataPartMixin],

    components: {
        loading,
        publicDialog
    },

    data: function() {
        return {
            loadingAjax: false,
            type: '',
            net_worth: '',
            height_all: '',
            eyes: '',
            hair: '',
            body: '',
            occupation: '',
            smoker: '',
            drinker: '',
            have_children: '',
            want_children: '',
            pets: '',
            education: '',
            ethnicity: '',
            languages: '',
            political_beliefs: '',
            religion: '',
            dialogData: {}
        }
    },

    activated() {
        this.type = this.$store.state.user.userInfo.detail.worth.income;
        this.net_worth = this.$store.state.user.userInfo.detail.worth.net_worth;
        this.height_all = this.$store.state.user.userInfo.detail.basics.height;
        this.eyes = this.$store.state.user.userInfo.detail.basics.eyes_color;
        this.hair = this.$store.state.user.userInfo.detail.basics.hair_color;
        this.body = this.$store.state.user.userInfo.detail.basics.body_type;
        this.occupation = this.$store.state.user.userInfo.detail.personalinfo.occupation;
        this.smoker = this.$store.state.user.userInfo.detail.lifestyle.smoking;
        this.drinker = this.$store.state.user.userInfo.detail.lifestyle.drinking;
        this.have_children = this.$store.state.user.userInfo.detail.lifestyle.have_children;
        this.want_children = this.$store.state.user.userInfo.detail.lifestyle.want_children;
        this.pets = this.$store.state.user.userInfo.detail.lifestyle.have_pets;
        this.education = this.$store.state.user.userInfo.detail.personalinfo.education;
        this.ethnicity = this.$store.state.user.userInfo.detail.personalinfo.ethnicity;
        this.languages = this.$store.state.user.userInfo.detail.personalinfo.language;
        this.political_beliefs = this.$store.state.user.userInfo.detail.personalinfo.political;
        this.religion = this.$store.state.user.userInfo.detail.personalinfo.religion;
        console.log(this);
    },

    computed: {
        incomeList() {
            return this.getLocalObj('ms_type2');
        },

        netWorthList() {
            return this.getLocalObj('ms_net_worth');
        },

        heightList() {
            return this.getLocalObj('ms_height');
        },

        eyesColorList() {
            return this.getLocalObj('ms_eyes');
        },

        hairColorList() {
            return this.getLocalObj('ms_hair');
        },

        bodyTypeList() {
            return this.getLocalObj('ms_body');
        },

        occupationList() {
            return this.getLocalObj('ms_occupation');
        },

        smokingList() {
            return this.getLocalObj('ms_smoker');
        },

        drinkingList() {
            return this.getLocalObj('ms_drinker');
        },

        haveChildrenList() {
            return this.getLocalObj('ms_have_children');
        },

        wantChildrenList() {
            return this.getLocalObj('ms_want_children');
        },

        havepetsList() {
            return this.getLocalObj('ms_pets');
        },

        educationList() {
            return this.getLocalObj('ms_education');
        },

        ethnicityList() {
            return this.getLocalObj('ms_ethnicity');
        },

        languageList() {
            return this.getLocalObj('ms_language');
        },

        politicalBeliefsList() {
            return this.getLocalObj('ms_political_beliefs');
        },

        educationList() {
            return this.getLocalObj('ms_education');
        },

        relationList() {
            return this.getLocalObj('ms_religion');
        },

        languageData: {
            get: function() {
                return this.getMultipleSelectArr(this.languages, this.languageList);
            },
            set: function(newValue) {
                this.languages = this.getMultipleSelectValue(newValue);
            }
        },

        languagesStr() {
            return this.getMultipleSelectLable(this.languageList, this.languages, '; ', 30);
        }
    },

    methods: {

        checkIsGuest(e) {
            if (this.$store.state.user.userInfo.status.isGuest) {
                this.$router.push({
                    name: 'upgrade'
                })
            }
        },

        getLocalObj(key) {
            let bool = false,
                obj = JSON.parse(Unit.getLocalStorage(key));

            for (let i in obj) {
                if (obj[i].label == 'Please ask me') {
                    obj[i].label = '−';
                    bool = true;
                    let arr = obj.splice(i, 1);
                    obj.push(arr[0]);
                }
            }

            if (!bool) {
                obj.push({ value: '', label: '−' });
            }
            return obj;
        },

        initSubmitData() {
            let data = {};
            data.type = this.type;
            data.net_worth = this.net_worth;
            data.education = this.education;
            data.ethnicity = this.ethnicity;
            data.language = this.languages;
            data.occupation = this.occupation;
            data.political_beliefs = this.political_beliefs;
            data.religion = this.religion;
            data.height_all = this.height_all;
            data.eyes = this.eyes;
            data.hair = this.hair;
            data.body = this.body;
            data.smoker = this.smoker;
            data.drinker = this.drinker;
            data.have_children = this.have_children;
            data.want_children = this.want_children;
            data.pets = this.pets;
            return data;
        },

        getSubmitData() {
            return this.initSubmitData();
        },

        initSetData(result) {
            let userInfo = Unit.getObjSessionStorage('ms_myself');
            userInfo.detail.worth.income = result.data.type;
            userInfo.detail.worth.net_worth = result.data.net_worth;
            userInfo.detail.basics.height = result.data.height_all;
            userInfo.detail.basics.eyes_color = result.data.eyes;
            userInfo.detail.basics.hair_color = result.data.hair;
            userInfo.detail.basics.body_type = result.data.body;
            userInfo.detail.personalinfo.occupation = result.data.occupation;
            userInfo.detail.lifestyle.smoking = result.data.smoker;
            userInfo.detail.lifestyle.drinking = result.data.drinker;
            userInfo.detail.lifestyle.have_children = result.data.have_children;
            userInfo.detail.lifestyle.want_children = result.data.want_children;
            userInfo.detail.lifestyle.have_pets = result.data.pets;
            userInfo.detail.personalinfo.education = result.data.education;
            userInfo.detail.personalinfo.ethnicity = result.data.ethnicity;
            userInfo.detail.personalinfo.language = result.data.language;
            userInfo.detail.personalinfo.political = result.data.political_beliefs;
            userInfo.detail.personalinfo.religion = result.data.religion;
            return userInfo;
        },

        getSetData(result) {
            return this.initSetData(result);
        },

        submit() {
            if (!this.loadingAjax) {
                this.loadingAjax = true;
                let tthis = this,
                    obj = {},
                    userInfo = Unit.getObjSessionStorage('ms_myself');
                obj.data = tthis.getSubmitData();
                obj.processData = function(result) {
                    if (result.results == 1) {
                        return tthis.getSetData(result);
                    } else {
                        tthis.dialogData = {
                            position: 'top',
                            type: 'error',
                            content: {
                                info: result.errs[0].errmsg,
                            }
                        };
                        return;
                    }
                };
                obj.callback = function() {
                    setTimeout(function() {
                        tthis.$router.push({
                            name: 'me'
                        });
                    }, 500)
                }
                obj.complete = function() {
                    tthis.loadingAjax = false;
                    tthis.$router.push({ 'name': 'me' });
                }
                tthis.$store.dispatch('user_updateProfile', obj);
            }
        }
    }
}

</script>
<style scoped>
.editProfileDetail {
    background: #fff;
    padding-top: 44px;
}

.editProfileDetail .editBox {
    margin: 0;
}

.editProfileDetail .editBox dt {
    padding: 0 10px;
    background-color: #f6f6f6;
    color: #000;
    font-size: 16px;
    height: 20px;
    line-height: 40px;
}

.editProfileDetail .editBox dd {
    border-bottom: 1px dashed #dcdfe3;
    padding: 10px 16px;
    min-height: 20px;
    position: relative;
    text-align: left;
}

.editProfileDetail .editBox dd .arrow {
    position: absolute;
    right: 22px;
    top: 13px;
}
































/*
.editProfileDetail .editBox dd .arrow:before {
    border: 7px solid transparent;
    border-left: 6px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -13px;
    content: '';
    right: -14px;
    border-left-color: #c7c7cc;
}

.editProfileDetail .editBox dd .arrow:after {
    border: 7px solid transparent;
    border-left: 6px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -13px;
    content: '';
}
*/

.editProfileDetail .editBox dd .arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 40px;
    line-height: 40px;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-size: auto 12px;
}

.editProfileDetail .editBox dd:last-child {
    border-bottom: 0;
}

.editProfileDetail .editBox label {
    font-size: 14px;
    color: #333;
    line-height: 20px;
    min-height: 20px;
    display: block;
}

.editProfileDetail .editBox option {
    direction: ltr;
}

.editProfileDetail .editBox select.selectA {
    position: absolute;
    top: 0;
    right: 20px;
    padding: 10px 0;
    color: #777;
    font-size: 14px;
    background: #fff;
    width: 60%;
    direction: rtl;
    text-align: right;
    padding-right: 12px;
}

@-moz-document url-prefix() {
    .editProfileDetail .editBox select.selectA {
        direction: ltr!important;
    }
}

.editProfileDetail .editBox select.selectB {
    border-radius: 3px;
    height: 27px;
    padding: 0 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    color: #000000;
    color: #777;
    width: 100px;
}

.editProfileDetail .editBox .multiple {
    height: 40px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 0;
    width: 60%;
}

.editProfileDetail .editBox .multiple .multipleHtml {
    text-align: right;
    padding-right: 12px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #777;
    font-size: 14px;
}

.editProfileDetail .editBox .multiple select {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

</style>
